<script setup lang="ts">
import { ref } from 'vue';
import type { FormInstance } from 'element-plus';
defineOptions({ name: 'GroupStaffUpload' });
const emit = defineEmits(['reloadSearch']);

const show = ref(false);
const enable = ref(true);
const id = ref(0);
const url = ref('');
const formRef = ref<FormInstance>();
const headerObj = {
  Authorization: localStorage.getItem('token')
};

function init(gid: number) {
  id.value = gid;
  show.value = true;
  url.value = `${import.meta.env.VITE_SERVICE_BASE_URL}/api/Group/Upload`;
  console.log(id.value, show.value);
}

function getDownUrl(): string {
  return `${import.meta.env.VITE_SERVICE_BASE_URL}/api/Group/down`;
}
function uploadSuccess(res: any) {
  enable.value = true;
  console.log('uploadSuccess', res);
  window.$message?.success('上传成功');
  emit('reloadSearch');
}
function upload() {
  enable.value = false;
  formRef.value.submit();
}

defineExpose({
  init
});
</script>

<template>
  <div>
    <ElDialog v-model="show" title="上传">
      <ElUpload
        ref="formRef"
        drag
        :headers="headerObj"
        :action="url"
        name="files"
        :on-success="uploadSuccess"
        accept=".xlsx"
        multiple
        :auto-upload="false"
      >
        <i class="el-icon-upload"></i>

        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击此处</em>
        </div>
        <div class="el-upload__tip">只能上传.xlsx类型的文件</div>
        <div class="el-upload__tip">每个文件不超过30MB</div>
      </ElUpload>
      <template #footer>
        <ElButton @click="show = false">取消</ElButton>
        &nbsp;
        <ElLink :href="getDownUrl()" target="_blank"><ElButton>下载模版</ElButton></ElLink>
        &nbsp;
        <ElButton type="primary" :disabled="enable !== true" @click="upload()">上传</ElButton>
      </template>
    </ElDialog>
  </div>
</template>
